<template>
	<div>
		<Row>
			<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
			<Input class="w-100" v-model="searchKey" placeholder="请输入预约房间名称" />
			</Col>
		</Row>
		<Row>
			<div class="w-100 d-flex justify-content-end align-items-center ">
				<Button class="m-1" type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
			</div>
		</Row>
		<div v-if="this.data.length == 0" class="d-flex justify-content-center p-1">
			暂无数据
		</div>
		<div v-else>
			<div class="mt-1">
				<Row>
					<Col class="p-1" v-for="(row, index) in data" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="6">
					<div :style="'background-image:url('+ row.rcover +'); background-size: 100% 100%;'"
						class="text-xss rounded shadow overflow-hidden">
							<div class="p-2 bg-black-80 text-fuguang d-flex text-lg justify-content-start text-blod">
								<span>{{row.rname}}</span>
							</div>
							<div class="p-2 bg-black-50 text-fuguang d-flex justify-content-end">
								<span>{{row.rmorderid}}</span>
							</div>
							<div
								class="p-2 bg-black-50 position-relative d-flex justify-content-between align-items-center">
								<!-- 左侧内容 -->
								<div class="w-25  position-relative">
									<div class="padding-top-100"></div>
									<div class="position-absolute rounded-circle overflow-hidden top0">
										<img class="w-100 h-100" :src="row.cover" />
									</div>
									<div class="text-danhong text-center">{{row.jlname}}</div>
								</div>
								<!-- 中间占位 -->
								<!-- <div class="w-35"></div> -->
								<!-- 右侧内容 -->
								<div class="text-fuguang">
									<div class="text-right ">
										<span>{{row.ct}}</span>
									</div>
									<div class="text-center ">
										<span class="iconfont icon-8"></span>
										<span class="text-align: right">{{row.sname}}</span>
									</div>
									<!-- <div class=" text-fuguang d-flex justify-content-end">{{row.ct}}</div>
						        <div class=" text-fuguang d-flex justify-content-end">{{row.sname}}</div> -->
								</div>
							</div>

							<div class="p-2 bg-black-50 d-flex justify-content-end">
								<Button class="text-xss ml-2" type="primary" size="small"
									@click="show(row.rmorderid)">详细</Button>

							</div>
					</div>
					</Col>
				</Row>
			</div>
		</div>
		<div>
			<Page class="text-right mt-3" :page-size="tableInfo.size" @on-change="pageSearch"
				:total="tableInfo.total" />
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				searchKey: "",
				tableInfo: {
					current: 0,
					size: 10,
					total: 0
				},
				data: []
			}
		},
		methods: {
			init: function() {
				this.tableInfo.currentPage = 0;
				this.search();
			},
			show: function(rmorderid) {
				this.$router.push({
					path: "/yyjl/detail",
					query: {
						rmorderid: rmorderid
					}
				})
			},
			searchs: function() {
				this.tableInfo.currentPage = 1;
				this.search();
			},
			search: function() {
				this.http.get({
					url: "/yyjl/page",
					params: {
						// 传一个当前页
						current: this.tableInfo.current,
						size: this.tableInfo.size,
						searchKey: this.searchKey
					}
				}).then(data => {
					console.log("yyjl");
					console.log(data);
					this.data = data.records;
					this.tableInfo.current = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.size = data.size;
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.current = changedPage;
				this.search();
			}
		},
		created: function() {
			this.init();
		}
	}
</script>

<style>

</style>
